<div id="pager">33333</div>
<div id ="ret"></div>
<script type="text/javascript">
function showPages(page, total) {
    var str = `<a>${page}</a>`;

    for (var i = 1; i <= 3; i++) {
        if (page - i > 1) {
            str = `<a href="#" class="page">${page - i}</a>${str}`;
        }

        if (page + i < total) {
            str = str + '' + (page + i);
        }
    }

    if (page - 4 > 1) {
        str = '...' + str;
    }

    if (page > 1) {
        str = '上一页' + 1 + '' + str;
    }

    if (page + 4 < total) {
        str = str + '...';
    }

    if (page < total) {
        str = str + '' + total + '下一页';
    }
    return str;
}


var total = 110;
for (var i = 1; i < total; i++) {
    var ret = showPages(i, total);
    console.log(ret);
    //重复添加一个节点可以用cloneNode()方法或者createElement()方法
    //直接使用appendChild("已有节点")会先删除已有节点再把这个节点添加到...
    //可以直接看appendChild()方法的详细介绍
    var node = document.getElementById('ret').cloneNode();
    node.innerHTML = ret;
   document.getElementById('pager').appendChild(node);
}
</script>
